<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar class="top" fixed placeholder title="网易严选">
      <template #left>
        <van-icon
          style="margin-left: 50px"
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
        />
        <van-icon
          style="margin-right: 50px"
          color="#666"
          name="shopping-cart-o"
          size="20"
        />
      </template>
    </van-nav-bar>
    <div class="logininfo">
      <img src="../assets/loginimg/loginlogo.png" alt="" />
      <!-- 表单 -->
      <van-form>
        <van-field
          v-model="userinfo.user_name"
          name="username"
          placeholder="请输入用户名"
          :rules="rules.username"
        />
        <van-field
          v-model="userinfo.user_pwd"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="rules.password"
        />
        <van-field
          v-model="userinfo.user_email"
          name="user_email"
          placeholder="请输入邮箱地址"
          :rules="rules.email"
        />
        <van-field
          v-model="userinfo.user_mobile"
          name="user_mobile"
          placeholder="请输入电话号码"
          :rules="rules.tel"
        />
        <div class="question">
          <span>遇到问题？</span>
          <p>已有账号<a @click="goto('/login')">去登录？</a></p>
        </div>
        <div style="margin: 16px">
          <van-button block type="danger" @click="register" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      checked: true,
      userinfo: {
        user_name: "",
        user_pwd: "",
        user_email: "",
        user_mobile: "",
      },
      rules: {
        username: [
          { required: true, message: "请填写用户名" },
          {
            pattern: /^[a-zA-Z0-9\W\.#@]{1,8}$/,
            message: "用户名长度不能超过八位字符",
          },
        ],
        password: [
          { required: true, message: "请填写密码" },
          {
            pattern:
              /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)[a-zA-Z0-9!@#$%^&*]{6,10}$/,
            message: "密码需要在6到10位数之间，且不能全为数字字符符号",
          },
        ],
        email: [
          { required: true, message: "请填写邮箱地址" },
          {
            pattern:
              /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
            message: "邮箱格式错误",
          },
        ],
        tel: [
          { required: true, message: "请填写电话号码" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "密码格式有误",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 跳转页面
    goto(url) {
      this.$router.push(url);
    },
    // 注册
    async register() {
      const {data} = await this.$request.get("/api/users/noexist", {
        params: {
          user_name:this.userinfo.user_name,
        }
      });
      if (data.code === 1) {
        const { data } = await this.$request.post("/api/users/reg", {
          ...this.userinfo,
        });
        if (data.code === 1) {
          this.$toast.success("注册成功");
          this.$router.replace({
            path: "/login",
            query: {
              username: this.userinfo.user_name,
            },
          });
        }
      }else{
        this.$toast('用户名已经存在')
      }
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.logininfo {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  height: 338px;
  margin-top: 30px;
  img {
    width: 100px;
    height: 33px;
  }
  .van-form {
    margin-top: 30px;
    .question {
      padding: 10px 20px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        color: #7f7f7f;
      }
      p {
        font-size: 14px;
        color: #333;
        a {
          color: #007aff;
        }
      }
    }
  }
}
</style>
